<template>
    <div class="container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span style="font-size: 20px;">AQI指数分布统计</span>
                    <el-button class="button" @click="init" text>刷新</el-button>
                </div>
            </template>

            <div class="content">
                <el-table :data="tableData" style="width: calc(90% - 30px);" :row-class-name="tableRowClassName">
                    <el-table-column prop="id" label="AQI指数等级" />
                    <el-table-column prop="category" label="AQI指数等级描述" />
                    <el-table-column prop="count" label="AQI指数等级分布统计" />
                </el-table>
                <div id="chart" class="chart-container"></div>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref } from 'vue'
import $axios from '../utils/axios'

const tableData = ref([])

// 定义初始化echarts图表的方法
const initChart = (chartData) => {
    const chart = echarts.init(document.getElementById('chart'))

    // 定义颜色映射表
    const colorMap = {
        优: '#67C23A',
        良好: '#FFFF00',
        轻度污染: '#FFA500',
        中度污染: '#FF0000',
        重度污染: '#800080',
        严重污染: '#800000'
    }

    // 配置图表
    const options = {
        title: {
            text: 'AQI指数分布统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: chartData.map(item => item.category)
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Radius Mode',
                type: 'pie',
                radius: [20, 140],
                center: ['25%', '50%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5,
                    color: function (params) {
                        return colorMap[params.name]
                    }
                },
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                data: chartData.map(item => ({
                    name: item.category,
                    value: item.count
                }))
            },
            {
                name: 'Area Mode',
                type: 'pie',
                radius: [20, 140],
                center: ['75%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5,
                    color: function (params) {
                        return colorMap[params.name]
                    }
                },
                data: chartData.map(item => ({
                    name: item.category,
                    value: item.count
                }))
            }
        ]
    }

    // 设置图表配置项
    chart.setOption(options)
}

const init = async () => {
    // 获取统计数据
    const path = '/statistics/distribution'
    const { data: res } = await $axios.get(path)
    if (res.code === 200) {
        tableData.value = res.result

        // 初始化echarts图表
        initChart(res.result)
    }
}
init()

//斑马条
const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 1 ? 'success-row' : 'normal-row'
}
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 96%;
}

.box-card {
    width: 98%;
    height: auto;
    margin-top: 12px;
    border-radius: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 100%; */
    height: auto;
}

.el-table {
    width: 50%;
    margin-bottom: 20px;
}

.chart-container {
    width:100%;
    height: 500px;
    margin-left: 20px;
    margin-top: 30px;
}


.text {
    font-size: 18px;
}

.item {
    margin-bottom: 10px;
}


#chart {
    width: 100%;
    height: 400px;
    margin-top: 1px;
    border-radius: 12px;
}
</style>

<style>
.el-table .success-row {
    --el-table-tr-bg-color: #87e09a; /* 背景 */
    color: #333; /* 深灰色文本 */
    border: 5px solid #ddd; /* 边框 */
    padding: 10px; /* 内边距 */
    text-align: center; /*表头文字居中  */
}
.el-table .normal-row {
    --el-table-tr-bg-color: #c6f1cf; /* 白色背景 */
    color: #333; /* 深灰色文本 */
    border: 1px solid #ddd; /* 边框 */
    padding: 10px; /* 内边距 */
}
/* 表头样式 */
.el-table th {
    background-color: #434343 !important; /* 表头背景色 */
    color: #ffffff; /* 表头文字颜色 */
    font-size: 15px; /* 表头字体大小 */
    text-align: center!important; /*表头文字居中  */
    padding: 10px; /* 表头内边距 */
}
/* 表格内容样式 */
.el-table td {
    font-size: 15px; /* 表格内容字体大小 */
    color: #333; /* 表格内容文字颜色 */
    text-align: center!important; /* 表格内容文字居中 */
    padding: 10px; /* 表格内容内边距 */
}
/* 鼠标悬停行的样式 */
.el-table .el-table__row:hover {
    background-color: #75a2ec !important; /* 浅蓝色背景 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}
</style>
